<template>
  <div>
     <div style="padding-bottom: 35px;overflow: hidden">
          <Header></Header>
         <Menu></Menu>
     </div>
      <div id="bodyApp">
          <div style="padding-top: 30px">
              <body_head
                      picture="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f334fbd05d5681bb838fefd1c815d88c.jpg?thumb=1&w=1226&h=120&f=webp&q=90"/>
          </div>
          <body_health title='手机' more ='查看更多' />
          <boy_list :phones="phones" />
          <boy_health2 title='家店' :titleList='titleList1' name="family"/>
          <list :src='familyStores[$store.getters.family]'/>
          <boy_health2 title='智能' :titleList='titleList2' name="smart"/>
          <list :src='smartS[$store.getters.smart]'/>
          <body_head
                  picture="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d16933cff56865943bb6e8906efd9824.jpg?thumb=1&w=1226&h=120"/>
          <boy_health2 title='搭配' :titleList='titleList3' name="match"/>
          <list :src='matchS[$store.getters.match]'/>
          <boy_health2 title='配件' :titleList='titleList4' name="parts"/>
          <list :src='parts[$store.getters.parts]'/>
          <boy_health2 title='周边' :titleList='titleList5' name="rim"/>
          <list :src='rimS[$store.getters.rim]'/>
          <body_head
                  picture="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/88e35cffc82cd98cd53172460067af17.jpg?thumb=1&w=1226&h=120"/>
          <body_health title='视频' more ='查看更多' />
          <div class="videos">
              <videos v-for="item in videos" :Views="item" :key="item.id"/>
          </div>
          <ToolBar/>
          <Foot/>
      </div>

  </div>
</template>

<script>
import Header from '../components/Header'
import body_head from '../components/xiaomibody/head'
import body_health from '../components/xiaomibody/health'
import boy_list from "../components/xiaomibody/boy_list"
import boy_health2 from '../components/xiaomibody/health2'
import  list from '../components/xiaomibody/list'
import videos from "../components/xiaomibody/videos";
import ToolBar from '../components/xiaomibody/ToolBar'
import Foot from  '../components/xiaomibody/Foot'
import Menu from '@/views/navigation/Menu'
import {getPhone} from "@/api/homepageBody";

export default {
  name: 'bodyApp',
  components: {Header,body_head,body_health,boy_list,boy_health2,list,videos,ToolBar,Foot,Menu},
  data(){
    return {
      titleList1:['热门','电视影音'],
      titleList2:['热门','安防','出行'],
      titleList3:['热门','耳机音响'],
      titleList4:['热门','充电器'],
      titleList5:['热门','出行'],
      phones:[],
      Prods :[],
      familyStores:[],
      smartS:[],
      matchS:[],
      parts:[],
      rimS:[],
      videos: [{
        id:0,
        url: "//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e74c4ff741bcdfc5b28a48a43e4edc6d.jpg?thumb=1&w=296&h=180",
        name: '2021年春季新品发布会第一场',
        src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/812358b69886e576c66a01f1f00affe9.mp4'
      },
        {
        id:1,
        url:"//cdn.cnbj1.fds.api.mi-img.com/mi-mall/101b19aca4bb489bcef0f503e44ec866.jpg?thumb=1&w=296&h=180",
        name: 'Redmi 10X系列发布会',
        src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/11c70c96529b6e6938567ec1aa0910e0.mp4'
        },
      ]
    }
  },
  created() {
    this.getProds()
  },
  methods: {
      getProds() {
        getPhone().then(res=>{
          this.Prods=res;
          for (const resKey in res) {
            res[resKey].prod_pic=process.env.VUE_APP_BASE_API+res[resKey].prod_pic
          }

          this.phones.push( this.Prods.filter(value => {
            return value.n_id ==17}).slice(0,8))

         this.familyStores.push( this.Prods.filter(value => {
            return value.n_id ==18}).slice(0,8))
          this.familyStores.push( this.Prods.filter(value => {
            return value.n_id ==19}).slice(0,8))

          this.smartS.push( this.Prods.filter(value => {
            return value.n_id ==20;}).slice(0,8))
          this.smartS.push( this.Prods.filter(value => {
            return value.n_id ==21;}).slice(0,8))
          this.smartS.push( this.Prods.filter(value => {
            return value.n_id ==22;}).slice(0,8))

          this.matchS.push( this.Prods.filter(value => {
            return value.n_id ==23;}).slice(0,8))
          this.matchS.push( this.Prods.filter(value => {
            return value.n_id ==24;}).slice(0,8))
          this.matchS.push( this.Prods.filter(value => {
            return value.n_id ==25;}).slice(0,8))

          this.parts.push( this.Prods.filter(value => {
            return value.n_id ==26;}).slice(0,8))
          this.rimS.push( this.Prods.filter(value => {
            return value.n_id ==27;}).slice(0,8));
          this.rimS.push( this.Prods.filter(value => {
            return value.n_id ==28;}).slice(0,8));
    })},
  },

}
</script>

<style >
#bodyApp  {
  background: #f5f5f5;
}
.videos {
  overflow: hidden;
  width: 1226px;
  margin: auto;
}
a {
  text-decoration: none;
}
</style>
